<template>
  <view style="display: flex;width: 100%;height: 100%;flex-direction: column;">
    <view class="pay">
      <view class="paynum">支付金额</view>
      <view class="price">￥{{ ((+OrderData.goodsPrice) * (+OrderData.goodsNum)- (+CheapPrice)).toFixed(2)}}</view>
    </view>
	<view style="display: flex;flex-direction: column;margin-top: 70px">
		<view style="display: flex;flex-direction: row;margin-left: 20px;">
    <view >预付金额</view>
	<view style="margin-left: 180px;">￥{{ ((+OrderData.goodsPrice) * (+OrderData.goodsNum))}}</view>
	</view>
	<view style="display: flex;flex-direction: row;margin-left: 20px;margin-top: 20px;" @tap="pay()">
	<view >优惠券</view>
		<view style="margin-left: 200px;" >></view>
	</view>
	<view style="display: flex;flex-direction: row;margin-left: 20px;margin-top: 20px;">
	<view >减免</view>
		<view style="margin-left: 220px;font-size: 15px;color: #d90000f0;">{{CheapPrice}}</view>
	</view>
	</view>
    <radio-group class="radio-group" @change="radioChange" style="margin-left:0px;">
      <view class="listPay">
        <uni-icons type="weixin" size="80rpx" color="#00aa00"></uni-icons>
        <view class="text">
            <view class="wx">微信支付</view>
            <view class="subWx">推荐使用微信支付</view>
        </view>
        <radio class="radio" value="weixin" name="payment" ></radio>
      </view>
      
      <view class="listPay1">
        <uni-icons type="wallet-filled" size="80rpx" color="#9e344f"></uni-icons>
        <view class="text">
            <view class="wx">银行卡支付</view>
            <view class="subWx">推荐使用银联支付</view>
        </view>
        <radio class="radio" value="bankcard" name="payment"></radio>
      </view>
    </radio-group>
	<button class="PayButton" @click="submit()">确定</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
		Token:{
			"token":'',
		},
		selectedCoupon: null,
		GetTrick:[],
        paymentMethod: null, // 默认选中微信支付
		CheapPrice:'0',
		OrderData:{},
	};
  },
  onLoad(option) {
	// this.OrderData=jsoption.message;
	this.OrderData=JSON.parse(option.message)
  	this.GetAllMsg();

  },
  methods: {
    radioChange(event) {
      this.paymentMethod = event.detail.value;
      console.log('选中的支付方式:', this.paymentMethod);
      // 你可以在这里进行支付方式切换的操作
    },
	GetAllMsg(){
		uni.request({
			url:'http://192.168.2.226:8086/business/user/mycouponlist',
			method:'GET',
			header:{
				'token':uni.getStorageSync('login-user').token
			},
			success:(res) =>{
				this.GetTrick=res.data.data;
				console.log(JSON.stringify(this.GetTrick))
			}
		})
	},
	pay(){
		// 显示优惠券列表的逻辑
		      // 这里可以是一个弹出窗口或导航到包含优惠券列表的新页面
		      // 以弹出窗口为例：
		      uni.showActionSheet({
		        itemList: this.GetTrick.map(coupon => `${coupon.title}    ￥${coupon.subsidy}`), // 显示所有优惠券的描述
		        success: (res) => {
		          this.selectedCoupon = this.GetTrick[res.tapIndex]; // 存储选中的优惠券
		          console.log("选中的优惠券:", this.selectedCoupon.subsidy);
				 this.CheapPrice=this.selectedCoupon.subsidy;
		          // 更新显示的优惠券信息
		          // ...
		        },
		        fail(err) {
		          console.log(err);
		        }
		      });
	},
	submit(){
		this.OrderData.orderType=11;
		if(!this.paymentMethod)
		{
			uni.showToast({
				icon:'error',
				title:'还未选择支付方式'
			})
		}
		else{

		uni.request({
		 	url:'http://192.168.2.226:8086/business/user/payment',
		 	method:'POST',
			header: {
			        'token':uni.getStorageSync('login-user').token// 在这里设置请求头
			    },
			data:this.OrderData,
		 	// 返回成功的结果
		 	success(res){
				console.log("5555555");
			uni.showToast({
				icon:'success',
				title:'支付成功',
				duration:2000,
			})
			if (res.data.code == 1) {
			    // 为避免页面跳转太快影响toast显示，可以设置一个延时跳转
			    setTimeout(() => {
			      uni.redirectTo({
			        url: '/pages/order/order'
			      });
			    }, 2000); // 与toast的持续时间一致
			  }
			},
		 	fail() {
		 		console.log("获取失败")
		 	},
		 })
		 }
	}
  }
};
</script>

<style>
	.paynum{
		font-weight: 500;
		color: #a5a5a5;
	}
	.pay{
		margin-left: 40%;
		margin-top: 20%;
		display: flex;
		flex-direction: column;
	}
	.price{
		margin-top: 20px;
        font-size: 20px;
		font-weight: 900;
		color: #1a1a1a;
	}
	.listPay{
		display: flex;
		flex-direction: row;
		margin-top: 150px;
		margin-left: 10%;
	}
	.listPay1{
		display: flex;
		flex-direction: row;
		margin-top: 20px;
		margin-left: 10%;
	}
	.text{
		margin-left: 20px;
	}
	.radio-group {
	    margin-left: auto; /* 将单选按钮放在最右边 */
	  }
	.radio {
	    margin: 10rpx;
		margin-left: 60px;
	  }
	.PayButton{
		  margin: 108rpx 20rpx 20rpx 20rpx;
		  background-color: #00e200;
		  }
	  
</style>